<template>
	<gui-page>
		<template v-slot:gBody>
			<view style="padding:50rpx;">
				<view style="height:150rpx;"></view>
				<view
				class="gui-flex gui-row gui-justify-content-center">
					<gui-image src="/static/logo.png" :width="128"></gui-image>
				</view>
				<view 
				style="margin-top:180rpx;">
					<form @submit="submit">
						<view>
							<text class="gui-text-small gui-color-gray"></text>
						</view>
						<view class="gui-border-b">
							<input 
							type="text" 
							class="gui-form-input" 
							name="username" 
							placeholder="登录账户" />
						</view>
						<view class="gui-margin-top">
							<text 
							class="gui-text-small gui-color-gray"></text>
						</view>
						<view class="gui-border-b">
							<input 
							type="password" 
							class="gui-form-input" 
							name="password" 
							placeholder="密码" />
						</view>
						<view 
						class="gui-margin-top gui-flex gui-rows gui-space-between" 
						hover-class="gui-tap">
							<text 
							class="gui-text gui-color-gray gui-block" @tap="forgetPwd">忘记密码</text>
							<text 
							class="gui-text gui-color-gray gui-block gui-text-right" @tap="loginbymsg">短信登录</text>
						</view>
						<view style="margin-top:38rpx;">
							<button 
							type="default" 
							class="gui-button gui-noborder" 
							formType="submit" 
							style="border-radius:50rpx;background:#170b1a;">
								<text 
								class="gui-color-white gui-button-text">登 录</text>
							</button>
						</view>
					</form>
				</view>
				
				<view 
				class="gui-flex gui-rows gui-nowrap gui-align-items-center" 
				style="margin-top:80rpx;">
					<view class="gui-title-line"></view>
					<text 
					class=" gui-h6" 
					style="padding-left:50rpx; padding-right:50rpx;">其他方式登录</text>
					<view class="gui-title-line"></view>
				</view>
				<view 
				class="gui-flex gui-rows gui-nowrap gui-justify-content-center gui-margin-top">
					<view 
					class="other-login-icons" 
					hover-class="gui-tap">
						<text 
						class="other-login-icons gui-icons gui-color-gray">&#xe63e;</text>
					</view>
					<view 
					class="other-login-icons" 
					hover-class="gui-tap">
						<text 
						class="other-login-icons gui-icons gui-color-gray">&#xe6cd;</text>
					</view>
				</view>
			</view>
		</template>
	</gui-page>
</template>
<script>
import graceChecker from "@/Grace6/js/checker.js";
export default {
	data() {
		return {}
	},
	methods: {
		forgetPwd  : function () { console.log('请自行完善代码'); },
		loginbymsg : function () { 
			uni.redirectTo({
				url:"/pages/login/login"
			})
		},
		submit : function(e){
			// 表单数据
			var formData = e.detail.value;
			// 利用 graceUI 的表单验证工具进行验证
			//定义表单规则
			var rule = [
				{name:"username", checkType : "string", checkRule:"5,50", errorMsg:"登录账户输入有误"},
				{name:"password", checkType : "string", checkRule:"6,100", errorMsg:"登录密码至少6个字符"},
			];
			var checkRes = graceChecker.check(formData, rule);
			if(checkRes){ 
				uni.showToast({title:"验证通过!", icon:"none"});
				uni.switchTab({
					url:"/pages/tabbar/index"
				})
				// 根据项目需要完成数据验证工作
			}else{
				uni.showToast({ title:graceChecker.error, icon: "none" });
			}
		}
	}
}
</script>
<style scoped>
.login-logo{width:180rpx; height:180rpx; font-size:80rpx; text-align:center; line-height:120rpx; padding:30rpx; border-radius:18rpx;}
.other-login-icons{width:88rpx; height:88rpx; text-align:center; font-size:70rpx; margin:20rpx;}
</style>